<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/admin.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>
</head>
<body>
<form class="layui-form layui-top-win" lay-filter="user">
    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-block">
            <input type="text" name="id" placeholder="请输入工号" value="${teacher.id}"
                   lay-verify="required|tno" readonly autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">真实名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入真实姓名" value="${teacher.name}"
                   lay-verify="required"
                   autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" <c:if test="${teacher.sex == '男'}"> checked</c:if>>
            <input type="radio" name="sex" value="女" title="女" <c:if test="${teacher.sex == '女'}"> checked</c:if>>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" value="${teacher.email}" placeholder="请输入邮箱" class="layui-input" lay-verify="required|email"
                   autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" name="phone" value="${teacher.phone}" lay-verify="required|phone" placeholder="请输入电话" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">教授课程</label>
        <div class="layui-input-block">
            <select name="courseId" lay-verify="required|number">
                <option value=""></option>
                <c:forEach items="${courses}" var="cs">
                    <option value="${cs.id}"  <c:if test="${cs.id == teacher.courseId}"> selected </c:if>  >${cs.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>

</form>

<script>

    layui.use(['form'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        form.verify({
            // 支持数组的形式 , 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            tno: [ /^\d{4,18}$/ ,'工号纯数字组成、且长度在 4 ~ 18 位']
        })
        form.on('submit', function (data) {
            axios.post("/teacher/modify/${teacher.id}", data.field).then(ret => {
                if (ret.data.status) {
                    // 刷新父组件的表格
                    parent.layui.table.reload("job")
                    parent.layer.msg("教师信息修改成功")
                    // 关闭父组件的弹出层
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else if (ret.data.code === 20000) {
                    // 获取错误消息
                    for (let key in ret.data.error) {
                        layer.msg(ret.data.error[key])
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>
